<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <title>02-预约领取</title>
  <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/bootstrap-4.2.1/css/bootstrap.min.css">
  <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/admin/easyui/themes/material-teal/easyui.css">
  <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/admin/easyui/themes/icon.css">
  <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/admin/easyui/themes/color.css">
  <style>
    .alertInfo p{
      color : #808080;
      font-size : 15px;
      font-style : oblique;
    }
    .categoryToPageDiv{
      margin-left : 10px;
    }
  </style>
</head>
<body>
  <div class="container-fluid">
    <br>
    <h3>预约领取</h3>
    <hr>
    <div class="">
      <table id="dg" style="width:100%;height:460px;"></table>
    </div>
    <!-- 添加,编辑,移除按钮 -->
    <div id="toolbar">
      <table>
        <tr>
          <td><a href="javascript:void(0)" class="easyui-linkbutton detailRecordCls" data-options="iconCls:'icon-edit',plain:true" onclick="detailRecord()">详情</a></td>
          <td>
            <div class="categoryToPageDiv">
              <form class="form-inline">
                <label class="my-1 mr-2" for="forCategoryToPage">物品类别</label>
                <select class="custom-select my-1 mr-lg-5" id="forCategoryToPage">
                </select>
              </form>
            </div>
          </td>
        </tr>
      </table>
    </div>
  </div> <!-- container-fluid -->
  
  <!-- Modal : showOrderToTake -->
  <div class="modal fade" id="showOrderToTake" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
      <div class="modal-content" style="width:600px;">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLabel">详情</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close" >
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <form action="#" id="showSearchLoserForm">
            <div class="form-group row">
              <label class="col-sm-1"></label>
              <label for="forPhoto" class="col-sm-2 col-form-label text-center">照片</label>
              <div class="col-sm-7">
                <figure class="figure">
                  <img src="" class="figure-img img-fluid rounded mx-auto d-block" style="width:400px;height:200px;">
                </figure>
              </div>
            </div>
            <div class="form-group row">
              <label class="col-sm-1"></label>
              <label for="forShowApplicant" class="col-sm-2 col-form-label text-center">发布者 </label>
              <div class="col-sm-7">
                <input type="text" id="forShowApplicant" class="form-control" readonly>
              </div>
            </div>
            <div class="form-group row">
              <label class="col-sm-1"></label>
              <label for="forShowTitle" class="col-sm-2 col-form-label text-center">标题 </label>
              <div class="col-sm-7">
                <input type="text" id="forShowTitle" class="form-control" readonly>
              </div>
            </div>
            <div class="form-group row">
              <label class="col-sm-1"></label>
              <label for="forShowCategory" class="col-sm-2 col-form-label text-center">失物类别</label>
              <div class="col-sm-7">
                <input type="text" id="forShowCategory" class="form-control" readonly>
              </div>
            </div>
            <div class="form-group row">
              <label class="col-sm-1"></label>
              <label for="forShowDetail" class="col-sm-2 col-form-label text-center">细节</label>
              <div class="col-sm-7">
                <textarea id="forShowDetail" class="form-control" rows="3" readonly></textarea>
              </div>
            </div>
            <!-- 确定领取 -->
			      <div class="form-group row">
			        <label class="col-sm-3"></label>
			        <div class="col-sm-6">
			          <div class="custom-control custom-radio custom-control-inline">
			            <input type="radio" id="successTake" name="forCheckFlag" class="custom-control-input" value="0" checked="checked">
			            <label class="custom-control-label" for="successTake">确定认领</label>
			          </div>
			          <div class="custom-control custom-radio custom-control-inline">
			            <input type="radio" id="doNotTake" name="forCheckFlag" class="custom-control-input" value="1">
			            <label class="custom-control-label" for="doNotTake">取消认领</label>
			          </div>
			        </div>
			      </div>
			      <div class="form-group row">
			        <label class="col-sm-1"></label>
			        <label for="forTakeInfo" class="col-sm-2 col-form-label text-center">认领情况</label>
			        <div class="col-sm-7">
			          <textarea id="forTakeInfo" class="form-control" rows="3"></textarea>
			        </div>
			      </div>
			      <div class="form-group row">
			        <label class="col-sm-3"></label>
              <div class="col-sm-7 alertInfo" style="padding:0px 12px;">
                <p style="">注：若确定认领，请核对信息，确认物品的主人。并务必填写领取人的姓名、联系方式、班级等信息。</p>
              </div>
			      </div>
          </form>
          <div class="form-group row">
            <label class="col-sm-3"></label>
            <div class="col-sm-6 text-center">
              <button type="button" class="btn col-sm-3 btn-outline-primary  mr-lg-5" data-dismiss="modal">取消</button>
              <button type="button" class="btn col-sm-3 btn-outline-primary confirmTakeCls">确定</button>
            </div>
          </div>
        </div><!-- modal-body -->
      </div><!-- modal-content -->
    </div><!-- modal-dialog -->
  </div><!-- modal fade -->

  <script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery-3.3.1.min.js"></script>
  <script type="text/javascript" src="${pageContext.request.contextPath }/bootstrap-4.2.1/js/bootstrap.min.js"></script>
  <script type="text/javascript" src="${pageContext.request.contextPath }/admin/js/categoryAjax.js"></script>
  <script type="text/javascript" src="${pageContext.request.contextPath }/admin/easyui/jquery.easyui.min.js"></script>
  <script type="text/javascript" src="${pageContext.request.contextPath }/admin/easyui/locale/easyui-lang-zh_CN.js"></script>
  <script type="text/javascript">
    $(function(){
    	// table格式化
    	$("#dg").datagrid({
    		url:"/LostAndFound/order?method=orderListForSearchLoser",
    		queryParams:{
    			cid : $("#forCategoryToPage option:selected").val()
    		},
    		columns:[[
          {field:'title',title:'标题',width:100},
          {field:'username',title:'发布者',width:100},
          {field:'cname',title:'物品类型',width:100},
          {field:'phone',title:'联系电话',width:100},
          {field:'issuetime',title:'发布时间',width:100},
    		]],
        rownumbers:true,
        pagination:true,
        singleSelect:true,
        method:"post",
        fitColumns:true,
        toolbar:"#toolbar",
        striped:true
    	})
    	// 分类显示
    	$("#forCategoryToPage").on("change",function(){
    		$("#dg").datagrid("load",{
    			cid:$("#forCategoryToPage option:selected").val()
    		})
    	})
    	// 确定领取
    	$(".confirmTakeCls").on("click",function(){
    		var objTake = $("input:radio[name='forCheckFlag']:checked").val();
    		var row = $('#dg').datagrid('getSelected');
    		// 0 为确定认领，1 为取消认领
    		if(objTake=="0"){
    			confirmClaim(row.aid);
    		}else{
    			cancelClaim(row.aid);
    		}
    	})
    })// end of $(function(){})
    
    // 展示详情
    function detailRecord(){
    	var row = $('#dg').datagrid('getSelected');
    	$(".confirmTakeCls").removeAttr('data-dismiss','modal');
    	if(row){
    		$("#forTakeInfo").val("");
        $(".detailRecordCls").attr('data-toggle','modal');
        $(".detailRecordCls").attr('data-target','#showOrderToTake');    		
        $(".figure-img").attr("src","/LostAndFound/images"+row.image);
        $("#forShowApplicant").val(row.username);
        $("#forShowTitle").val(row.title);
        $("#forShowCategory").val(row.cname);
        $("#forShowPhone").val(row.phone);
        $("#forShowDetail").val(row.detailinfo);
    	}
    } // end of detailRecord()
    // 取消认领，修改article表中foundflag字段的值为1
    function cancelClaim(aid){
    	$(".confirmTakeCls").attr('data-dismiss','modal');
    	$.post(
    	  "/LostAndFound/order?method=handleCancelClaim",
    	  {"aid":aid},
    	  function(data){
    		  if(data.success){
    			  $("#dg").datagrid("reload");
    		  }else{
    			  $.messager.show({
    				  title:"Error",
    				  msg:"删除错误！"
    			  })
    		  }
    	  },
    	  "json"
    	);
    } // end of cancelClaim()
    // 确定认领，修改article表中foundflag字段的值为0，并且写入foundArticle表中
    function confirmClaim(aid){
    	var foundInfo = $("#forTakeInfo").val();
    	if(foundInfo==null||foundInfo==""){
    		$("#forTakeInfo").focus();
    	}else{
    		$(".confirmTakeCls").attr('data-dismiss','modal');
	    	$.post(
	    		"/LostAndFound/order?method=handleConfirmClaim",
	    		{"aid":aid,"foundInfo":foundInfo},
	    		function(data){
	    			if(data.success){
	    				$("#dg").datagrid("reload");
	    			}else{
	    				$.messager.show({
	    					title:"Error",
	    					msg:"操作错误！"
	    				})
	    			}
	    		},
	    		"json"
	    	);
    	}
    } // end of confirmClaim()
  </script>
</body>
</html>